<template>
  <div>
    <el-row :gutter="14">
      <el-col :span="4">
        <div class="label-wrap category">
          <label for="">分类：</label>
          <div class="warp-content">
            <el-select
              v-model="categoryValue"
              placeholder="请选择"
              style="width:100%"
            >
              <el-option
                v-for="item in options.item"
                :key="item.id"
                :label="item.category_name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </el-col>

      <el-col :span="7">
        <div class="label-wrap date">
          <label for="">日期：&nbsp;&nbsp;</label>
          <div class="warp-content">
            <el-date-picker
              style="width: 100%;"
              v-model="dateValue"
              type="daterange"
              format="yyyy 年 MM 月 dd 日"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="label-wrap key-work">
          <label for="">关键字：</label>
          <div class="warp-content">
            <el-select v-model="sreach_key" placeholder="ID" style="width:100%">
              <el-option
                v-for="item in searchOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </el-col>

      <el-col :span="4">
        <el-input
          v-model="search_keyWork"
          placeholder="请输入内容"
          style="width: 100%;"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="danger" style="width: 100%;" @click="getPageItem"
          >搜索</el-button
        >
      </el-col>
      <!-- <el-col :span="3">&nbsp;</el-col> -->
      <el-col :span="2" class="pull-right">
        <el-button type="danger" style="width: 100%;" @click="dialogInfo = true"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <div class="tab-space-30"></div>
    <!-- 表格数据 -->
    <el-table
      :data="tableData.item"
      border
      style="width: 100%"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40"> </el-table-column>
      <el-table-column prop="title" label="标题" width="500px">
      </el-table-column>
      <el-table-column
        prop="categoryId"
        label="类别"
        width="100px"
        :formatter="setCategory"
      >
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="时间"
        width="150px"
        :formatter="setDate"
      >
      </el-table-column>
      <el-table-column prop="user" label="管理人" width="120px">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteItem(scope.row.id)"
            >删除</el-button
          >
          <el-button size="mini" type="success" @click="dialogInfo = true"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="tab-space-30"></div>
    <el-row>
      <el-col :span="12">
        <el-button size="mini" @click="deleteAllItem">批量删除</el-button>
      </el-col>
      <el-col :span="12">
        <el-pagination
          class="pull-right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          layout="total,sizes, prev, pager, next,jumper"
          :total="tableData.total"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <!--新增的弹窗 -->
    <DialogInfo :flag.sync="dialogInfo" :category="options.item"></DialogInfo>
  </div>
</template>

<script>
import { reactive, ref, watch, onMounted } from "@vue/composition-api";
import { common } from "@/utils/common.js";
import DialogInfo from "./dialog/info";
import { getList, deleteInfo, editInfo } from "@/network/api/news.js";
import { formatDate } from "@/utils/dateFamtt.js";
export default {
  name: "infoIndex",
  components: { DialogInfo },
  setup(props, { root }) {
    const { getInfoCategory, categoryItem } = common();
    // ref
    const categoryValue = ref("");
    const sreach_key = ref("ID");
    const dateValue = ref("");
    const search_keyWork = ref("");
    const dialogInfo = ref(false);

    //页面加载
    const loading = ref(false);

    const options = reactive({
      item: []
    });

    const searchOptions = reactive([
      {
        value: 1,
        label: "ID"
      },
      {
        value: 2,
        label: "标题"
      }
    ]);

    // 表格数据
    const tableData = reactive({
      item: [],
      total: 0
    });

    const deleteIdList = reactive({
      item: []
    });
    const pageShowItem = reactive({
      number: 1,
      size: 10
    });
    // 分页中的方法

    const handleSizeChange = val => {
      pageShowItem.size = val;
      getPageItem();
    };

    const handleCurrentChange = val => {
      pageShowItem.number = val;
      getPageItem();
    };

    //删除一条数据
    const deleteItem = res => {
      deleteIdList.item = [res];
      root.confirm({
        title: "确定删除该条数据吗？删除后将不能恢复！",
        fn: confirmDelete,
        tips: "success"
      });
    };

    //批量删除
    const deleteAllItem = () => {
      if (deleteIdList.item.length < 1) {
        return root.$message({
          message: "请选择需要删除的条目",
          type: "error"
        });
      }
      root.confirm({
        title: "确定删除所选数据吗？删除后将不能恢复！",
        fn: confirmDelete
      });
    };

    //获取批量删除的id
    const handleSelectionChange = res => {
      deleteIdList.item = res.map(item => item.id);
    };

    //确认删除
    const confirmDelete = prom => {
      deleteInfo({ id: deleteIdList.item })
        .then(() => {
          getPageItem();
        })
        .catch(() => {
          root.$message({
            message: "数据删除失败",
            type: "error"
          });
        });
    };

    /**
     * 搜索条件处理
     */
    const formatData = () => {
      let requestData = {
        pageNumber: pageShowItem.number,
        pageSize: pageShowItem.size
      };
      // 分类ID
      if (categoryValue.value) {
        requestData.categoryId = categoryValue.value;
      }
      // 日期
      if (dateValue.value.length > 0) {
        requestData.startTiem = dateValue.value[0];
        requestData.endTime = dateValue.value[1];
      }
      // 关键字
      if (search_keyWork.value) {
        requestData[sreach_key.value] = search_keyWork.value;
      }
      return requestData;
    };

    //search page data
    // const searchData = () => {
    //   console.log(dateValue.value, "]]]]");
    //   console.log(sreach_key.value);
    // };

    //获取页面item数据
    const getPageItem = () => {
      let requestData = formatData();
      loading.value = true;
      getList(requestData)
        .then(result => {
          if (result.data.resCode == 0) {
            let res = result.data.data;
            tableData.total = res.total;
            tableData.item = res.data;
          }
          loading.value = false;
        })
        .catch(() => {
          loading.value = false;
        });
    };

    //格式化页面时间数据
    const setDate = row => {
      return formatDate(row.createDate);
    };
    const setCategory = row => {
      if (options.item.length < 1) {
        return;
      }
      let list = options.item.filter(res => res.id == row.categoryId);

      return list[0].category_name;

      //return
    };

    // 生命周期函数
    onMounted(() => {
      getInfoCategory();
      getPageItem();
    });

    //watch
    watch(
      () => categoryItem.item,
      value => {
        options.item = value;
      }
    );

    return {
      //ref
      categoryValue,
      sreach_key,
      search_keyWork,
      dateValue,
      dialogInfo,
      loading,

      //reactive
      searchOptions,
      options,
      tableData,

      //methous
      handleSizeChange,
      handleCurrentChange,
      deleteItem,
      deleteAllItem,
      setDate,
      setCategory,
      handleSelectionChange,
      getPageItem

    };
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/config.scss";

.label-wrap {
  &.category {
    @include labelDom(left, 40, 40);
  }
  &.date {
    @include labelDom(right, 70, 40);
  }
  &.key-work {
    @include labelDom(right, 80, 40);
  }
}
</style>
